MVC & MVVM

React是Web前端框架

• 目前市面上比较主流的前端框架

  • React
  • Vue
  • Angular

• 主流的思想:不在直接去操作DOM，而是改为“数据驱动思想”操作DOM思想:

  • 操作DOM比较消耗性能 (主要原因就是:可能会导致DOM重排(回流)/重绘)
  • 操作起来也相对来讲麻烦一些

• 数据驱动思想:

  • 我们不会在直接操作DOM
  • 我们去操作数据下当我们修改了数据，框架会按照相关的数据，让页面重新渲染
  • 框架底层实现视图的渲染，也是基于操作DOM完成的
    • 构建了一套虚拟DOM真实DOM 的渲染体系
    • 有效避免了DOM的重排/重绘
  • 开发效率更高、最后的性能也相对较好

Reac=>MVC体系; Vue=>MVVM体系

• MVC: model数据层 + view视图层 + controller控制层

  • 我们需要按照专业的语法去构建视图 (页面):React中是基于jsx语法来构建视图的
  • 数据层-Model
    • 但凡在视图中，需要“动态”处理的(需要变化的，不论是样式还是内容)，我们都要有对应的数据模型
  • 控制层-Controller
    • 当我们在视图中(或者根据业务需求)进行某些操作的时候，都是去修改相关的数据，然后React架会按照最新的数据，重新染视图，以此让用户看到最新的效果!
  • 视图层-View
    • 数据驱动视图的渲染!!
    • 视图中的表单内容改变，想要修改数据，需要开发者自己去写代码实现!!
    • “单动”

• MVVM: model数据层 + view视图层 + viewModel数据/视图监听层

  • 数据驱动视图的渲染:监听数据的更新，让视图重新渲染
  • 视图驱动数据的更改:监听页面中表单元素内容改变，自动去修改相关的数据
  • “双向动”